import { defineComponent } from 'vue';
<template>
	<h1>{{ count }}</h1>
	<button type="button" @click="increase">Increase</button>
	<h1>user:{{ user.name }},{{ user.age }}</h1>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
interface Person {
	name: string
	age: number
}
export default defineComponent({
	name: 'RefReactive',
	setup() {
		// 推荐原始类型用 ref,引用类型用 reactive
		const count = ref<number | string>(0)
		const user = reactive<Person>({
			name: '李子一',
			age: 32
		})
		const increase = () => {
			if (typeof count.value === 'number') {
				count.value++
			}
			user.age++
		}

		return { count, increase, user }
	}
})
</script>
<style lang="scss" scoped></style>
